<script setup lang="ts">
/**
 * 用来浏览图片
 * 使用 <x-image url="url"/>
 */
import {DEFAULT_IMAGE_PATH} from "@/utils/constant";

const props = withDefaults(defineProps<{
  url: string | undefined,
  size?: number // size为1到10,单位为em(自动)
  borderRadius?: string | undefined
}>(), {
  size: 4,
})
const baseUrl = DEFAULT_IMAGE_PATH
let tempBorderRadius = '0.75em'
const theSize = computed(() => {
  const {size} = props
  if (typeof size === 'number') {
    if (props.size < 1 || props.size > 10) {
      return '4em'
    } else {
      return size + 'em'
    }
  } else {
    return '4em'
  }
})
tempBorderRadius = props.borderRadius ?? tempBorderRadius

</script>

<template>
  <el-image
      v-if="props.url"
      fit="cover"
      crossorigin
      class="my-image"
      :src="baseUrl + props.url"
  >
    <template #error>
      <div class="empty-photo">
        <i-ep-picture-filled/>
      </div>
    </template>
  </el-image>
  <div v-else class="empty-photo">
    <i-ep-picture/>
  </div>
</template>

<style scoped lang="scss">
.my-image {
  height: v-bind(theSize);
  width: v-bind(theSize);
  border-radius: v-bind(tempBorderRadius);
}

.empty-photo {
  height: v-bind(theSize);
  width: v-bind(theSize);
  display: flex;
  border-radius: v-bind(tempBorderRadius);
  align-items: center;
  justify-content: center;
  color: #8c939d;
}
</style>